<template>
  <div style="justify-content: center;">
  <div>
    <el-table :data="roomList" stripe>
      <el-table-column label="操作" width="230">
      <template v-slot="scope">
        <!--          scope.row 就是当前行数据-->
        <el-button type="warning" @click="appendGame(scope.$index)">加入房间</el-button>
      </template>
      </el-table-column>
      <el-table-column width="230" prop="roomName" label="房间名称"></el-table-column>
      <el-table-column width="230" prop="created" label="创建者"></el-table-column>
      <el-table-column width="230" prop="num" label="房间人数"></el-table-column>
      <el-table-column width="340" prop="roomId" label="房间号"></el-table-column>
    </el-table>


    <!--    分页-->
<!--    <div class="pagination-container">-->
<!--      <el-pagination-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--          :current-page="params.pageNum"-->
<!--          :page-sizes="[1, 2, 3, 4]"-->
<!--          :page-size="params.pageSize"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="total">-->
<!--      </el-pagination>-->
<!--    </div>-->
  </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "RoomsTable",
  props:{
    ws: {
      required: true
    },
  },
  data(){
    return{
      roomList:[],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  methods:{
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.load()
    },
    handleSizeChange(newSize) {
      this.params.pageSize = newSize;  // 更新每页显示的数据量
      this.load();
    },
    handleCurrentChange(pageNum) {
      // 点击分页按钮触发分页
      this.params.pageNum = pageNum
      this.load()
    },
    appendGame(index){
      console.log(index)
      let row =this.roomList[index];
      const m ={
        order: 3,
        roomId: row.roomId,
        game: 1,
        mode :0,
        operation: 0
      }
      this.ws.send(JSON.stringify(m));
    },
    handle(res){
      // console.log(res);
      switch (res.order) {
        case 2:
          if(res.result){
            console.log("加入房间成功")
            this.$emit("event");
          }else{
            alert("加入房间失败");
          }
          break;
        case 4:
          this.roomList = res.list;
          break;
        case 5:
          console.log("res", res);
          if(res.gameType != 0){
            this.$emit("event");
          }
          break;
      }
    },
    rushRoomList(){
      //请求房间列表
      const require ={
        order: 4,
        game: 1,  //游戏类型
      }
      this.ws.send(JSON.stringify(require));
    },
    startGame(game){
      //启动游戏界面
      console.log("启动游戏界面");
      this.$emit("startGame", game);
    },
    //请求当前是否在游戏状态，如果是则自动跳转到游戏界面
    isStart(){
      const p = {
        order : 6,
        game: 1
      }
      this.ws.send(JSON.stringify(p));
    },
    //请求当前是否在某个房间，如果在则自动跳转到该房间
    isInRoom(){
      const p = {
        order : 5,
        game: 1
      }
      this.ws.send(JSON.stringify(p));
    },
  },
  beforeMount() {
    let handle=(m)=>this.handle(m);
    this.ws.onmessage=function (m){
      handle(JSON.parse(m.data));
    }
    this.isInRoom();
    this.rushRoomList();
  }
}
</script>

<style>
.pagination-container {
  text-align: center;
}
.el-table {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  flex: 1;
   width: 100vw;
  /* max-width: 100%; */
  font-size: 14px;
  color: #606266;
}
</style>
